<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::header-fragment"></header>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- 引入页面头header-fragment -->
    <div th:replace="admin/header::header-nav"></div>
    <!-- 引入侧边工具栏sidebar-fragment -->
    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- 主要内容区 Main content -->
        <div class="content">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">首页</h3>
                </div> <!-- /.card-body -->
                <div class="card-body">
                    <div class="panel panel-default">
                        <div style="padding: 10px 0 20px 10px;">

                            <!--基本订单统计-->
                            <div class="row">
                                <div class="col-lg-3 col-xs-6">
                                    <div class="small-box bg-info">
                                        <div class="inner">
                                            <h3 th:text="${totalOrdersPrice}"></h3>
                                            <p>总成交额</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-xs-6" style="margin-left: 100px">
                                    <div class="small-box bg-warning">
                                        <div class="inner">
                                            <h3 th:text="${ordersNumber}"></h3>
                                            <p>总下单量</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-xs-6" style="margin-left: 100px">
                                    <div class="small-box bg-info-gradient">
                                        <div class="inner">
                                            <h3 th:text="${userNumber}"></h3>
                                            <p>用户数量</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!--EChart 过去10天销量信息-->
                                <div id="myOrders" style="width: 600px;height:400px;"></div>
                            </div>
                            <script type="text/javascript" th:inline="javascript">
                                var myChart = echarts.init(document.getElementById('myOrders'));
                                var  groupByDay= [[${groupByDay}]];

                                let days = new Array();
                                let total = new Array();
                                for(key in groupByDay){
                                    days.push(key);
                                    total.push(groupByDay[key].length);
                                }
                                if(days.length>10 && total.length>10){
                                    days = days.slice(-10);
                                    total = total.slice(-10);
                                }



                                // 指定图表的配置项和数据
                                var option = {
                                    title: {
                                        text: '最近的下单数'
                                    },
                                    tooltip: {},
                                    legend: {
                                        data: ['销量']
                                    },
                                    xAxis: {
                                        // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                                        data: days
                                    },
                                    yAxis: {},
                                    series: [{
                                        name: '销量',
                                        type: 'bar',
                                        data: total
                                    }]
                                };

                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            </script>

                            <!--
                                                        <div class="row">
                                                            <div class="fa-bar-chart" style="height: 200px">
                                                                <h5 class="panel-title">下单统计</h5>
                                                                <canvas id="myOrders"></canvas>
                                                            </div>
                                                        </div>
                            -->

                            <a href="https://gitee.com/voghost/spring-boot-wechat-mall" target="_blank">
                                <p>
                                    微信小程序商店后台
                                </p>
                                <ul>
                                    <li>小程序后台</li>
                                    <li>商品增删改查</li>
                                    <li>订单管理</li>
                                    <li>spring boot</li>
                                </ul>
                            </a>
                            <h3>作者</h3>
                            <ul>
                                <li>陈志聪(小程序)</li>
                                <li>黄子毅(后台前端ui,部分sql)</li>
                                <li>刘凌峰(后端)</li>
                            </ul>
                            <p>查看仓库</p>
                            <ul>
                                <li><a href="https://github.com/voghost/spring-boot-wechat-mall"
                                       target="_blank">GitHub</a></li>
                                <li><a href="https://gitee.com/voghost/spring-boot-wechat-mall"
                                       target="_blank">Gitee</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- 引入页脚footer-fragment -->
    <div th:replace="admin/footer::footer-fragment"></div>
</div>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/admin/dist/js/adminlte.min.js}"></script>
<!--index.js-->
<script th:src="@{/admin/dist/js/index.js}" th:inline="javascript"></script>
<!--<script th:src="@{/admin/dist/js/plugins/chart.js}"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
        integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
        crossorigin="anonymous">
</script>
</body>
</html>
